<template>
	<view class="content">
		<view v-if="indicatorDots" @click="indicatorDots=false" style="position: fixed;z-index: 5;width: 100%;height: 100vh;top: 0;left: 0;background-color: rgba(0,0, 0, 0.6);">
		</view>
		<view class="flex-top-header ">
			<view class="borde-padd-24">
				<view class="search flex-line-height " @click="goPages('/pages/Job/shaiXuan')">
					<image class="search-img" :src="imgUrl+'/search.png'" mode=""></image>
					<input @blur="search" v-model="searchTitle" class="input" style="width: 80%;"  placeholder="搜索职位/课程" >
				</view>
			</view>	
		
		</view>
		
		<!-- <view class="flex-line-height flex-wrap borde-padd-24" style="margin-bottom: 16rpx;">
			<view class="tabLIst"
			 :class="{
				 active:index==tabIndex
			 }"
			 @click="typeFunCtype(index,'tabIndex','nature_cn')"
			 v-for="(item,index) in natureCn">{{item}}</view>xueLIConter
		</view> -->
		<!-- 
			typeFunCtype 
			tabIndex=index
		-->
		<scroll-view @scrolltolower="scroll" style="height: 100vh;" class="martop" scroll-y >
			<view style="display: flex;align-items: center;height: 50%;justify-content: center;" v-if="!jobConList.length">
				<view>
					<image class="cuqnConte"  :src="imgUrl+'/qunsheng.png'"  mode=""></image>
					<view class="" style="color: #0D0E0F;font-size: 24rpx;padding-top: 10rpx;">正在加载...</view>
				</view>
			</view>
			<view class="position borde-padd-24">
				<!-- pages/Job/JobDetails -->
				<view class="position-list" v-for="item in jobConList" @click="goPages('/pages/Job/JobDetails?id='+item.id)" >
					<view class="list-header flex-height-between">
						<text class="l">{{item.job_name}}</text>
						<text class="r" v-if="item.min_wage>0">{{item.min_wage}}-{{item.max_wage}}</text>
						<text class="r" v-else>面议</text>
					</view>
					<view class="label flex-wrap">
						<view v-if='item.xueLIConter' class="label-list a">{{item.xueLIConter}}</view>
						<view v-if='item.experience_cn && item.experience_cn != "不限" && item.experience_cn != "否"' class="label-list b">{{item.experience_cn}}</view>
						<view v-if='item.nature_cn' class="label-list c">{{item.nature_cn}}</view>
						<view v-if='item.education_cn && item.education_cn != item.experience_cn' class="label-list d">{{item.education_cn}}</view>
					</view>
					<view class="ellipsis stne">起始时间： {{item.start_time}}～{{item.end_time}} </view>
					<view class="ellipsis stne">工作地点： {{item.area_cn}} </view>
					<view class="flex-height-between">
						<view class="contenArrsbx flex-line-height">
							<!-- <image class="user-img" :src="item.get_company.company_show_logo" mode=""></image> -->
							<text>{{item.company_name}}</text>
							<view class="consList">
								{{item.get_company.company_nature_cn}}
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</scroll-view>
	
		<footerTer :active="2"></footerTer>
	</view>

</template>

<script>
	// /api/job/type
	import myscrollView from "../../components/myscroll-view.vue"
	import footerTer from "../../components/footer.vue"
	import {
		Request
	} from '@/utils/request.js'
	export default {
		components:{
			footerTer,
			myscrollView
		},
	    data() {
	        return {
	            indicatorDots: false,
				jobConList:[],
				tabIndex:0,
				upAndDown:'upper',
				imgUrl:this.imgUrl,
				natureCn:[],
				natureCnIndex:0,
				educationCn:[],
				educationCnIndex:0,
				experienceCn:[],
				experienceCnIndex:0,
				majorCn:[],
				majorCnIndex:0,
				yuexinCn:[],
				yuexinCnIndex:0,
				financingstageCn:[],
				financingstageCnIndex:0,
				companynatureCn:[],
				companynatureCnIndex:0,
				companyscaleCn:[],
				companyscaleCnIndex:0,
				searchTitle:'',
				page:1,
				FormData:{},
				xuanzon:['要求','单位','薪资'],
				xuanzonIndex:0,
	        }
	    },
		onLoad(e) {
			this.FormData={
				...e
			}
			//this.jobType();
			this.joblist();
		},
		onPageScroll() {
			
		},
	    methods: {
			chonZhi(){
				this.natureCnIndex=0;
				this.yuexinCnIndex=0;
				this.financingstageCnIndex=0;
				this.companynatureCnIndex=0;
				this.companyscaleCnIndex=0;
				this.majorCnIndex=0;
				this.experienceCnIndex=0;
				this.educationCnIndex=0;
				this.FormData={};
			},
			yaoqiMenshe(index){
				if(index==this.xuanzonIndex && this.indicatorDots==true){
					this.indicatorDots=false;
					return false;
				}
				this.xuanzonIndex=index;
				this.indicatorDots=true;
			},
			shaxuanCnst(){
				this.FormData={
					education_cn:this.educationCn[this.educationCnIndex]=='全部'?'':this.educationCn[this.educationCnIndex],
					experience_cn:this.experienceCn[this.experienceCnIndex]=='全部'?'':this.experienceCn[this.experienceCnIndex],
					nature_cn:this.natureCn[this.natureCnIndex]=='全部'?'':this.natureCn[this.natureCnIndex],
					major_cn:this.majorCn[this.majorCnIndex]=='全部'?'':this.majorCn[this.majorCnIndex],
					financingstageCn:this.financingstageCn[this.financingstageCnIndex]=='全部'?'':this.financingstageCn[this.financingstageCnIndex],
					yuexinCn:this.yuexinCn[this.yuexinCnIndex]=='全部'?'':this.yuexinCn[this.yuexinCnIndex],
					companynatureCn:this.companynatureCn[this.companynatureCnIndex]=='全部'?'':this.companynatureCn[this.companynatureCnIndex],
					companyscaleCn:this.companyscaleCn[this.companyscaleCnIndex]=='全部'?'':this.companyscaleCn[this.companyscaleCnIndex],
				}
				let xuanzon=[];
				for (let i in this.FormData){
					if(this.FormData[i]){
						xuanzon.push(this.FormData[i])
					}
				}
				// this.xuanzon=xuanzon;
				this.jobConList=[];
				this.page=1;
				this.joblist();
				this.indicatorDots=false;
			},
			typeFunCtype(index,tabIndex,typeKey){
				// "typeFunCtype(index,'tabIndex','nature_cn')"
				this.page=1;
				this.jobConList=[];
				this[tabIndex]=index;
				this.joblist();
			},
			goPages(path){
				uni.navigateTo({
					url:path
				})
			},
			scroll(e){
				this.page=this.page+1;
				this.joblist()
			},
			search(e){
				// console.log(e.detail.value);
				// console.log(this.searchTitle)
				this.jobConList=[];
				this.page=1;
				this.joblist();
			},
			joblist(){
				Request('job/list',{
					title:this.searchTitle,
					page:this.page,
					nature_cn:this.natureCn[this.tabIndex]=='全部'?'':this.natureCn[this.tabIndex],
					...this.FormData
				}).then(({data}) => {
					const tdata = data || [];
					this.jobConList = this.jobConList.concat(tdata);
				})
			},
	       jobType(){
			   Request('job/type',{}).then(({natureCn,educationCn,experienceCn,majorCn,yuexinCn,financingstageCn,companynatureCn,companyscaleCn})=>{
				   this.natureCn=['全部',...natureCn];
				   this.yuexinCn=['全部',...yuexinCn];
				   this.financingstageCn=['全部',...financingstageCn];
				   this.companynatureCn=['全部',...companynatureCn];
				   this.companyscaleCn=['全部',...companyscaleCn];
				   this.educationCn=['全部',...educationCn];
				   this.experienceCn=['全部',...experienceCn];
				   this.majorCn=['全部',...majorCn];
				   
			   })
		   }
	    }
	}
	
</script>

<style scoped>
	.content{
		padding-top: 80rpx;
		box-sizing: border-box;
	}
	
	
	.flex-top-header{
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		background-color: #fff;
		width: 100%;
		z-index: 10;
		padding-bottom: 20rpx;
		padding-top: 50rpx;
	}
	
	/* #ifdef H5 */
	.flex-top-header{
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		background-color: #fff;
		width: 100%;
		z-index: 10;
		padding-bottom: 20rpx;
		padding-top: 90rpx;
	}
	.martop{
		margin-top: 5rpx;
	}
	/* #endif */
	/* #ifdef MP-WEIXIN */
	.martop{
		margin-top: 50rpx;
	}
	/* #endif */
	.sch{
		font-size: 24rpx;
		border-radius: 20rpx;
		width: 140rpx;
		color: #ffffff;
		border: 2rpx solid #E8A03D;
		font-weight: 800;
		background-color: #E8A03D;
	}
	.content{
		padding-top: 80rpx !important;
	}
	.tabLIst{
		/* height: 52rpx; */
		margin-bottom: 16rpx;
		width: 192rpx;
		margin-right: 16rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		padding: 0 16rpx;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: center;
		line-height: 52rpx;
		font-style: normal;
		text-transform: none;
	}
	.tabLIst:nth-child(3n){
		margin-right: 0;
	}
	.saoxuan-posiconterConter{
		max-height: 50vh;
		overflow: auto;
	}
	.xueLIConter{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: left;
		padding-top: 24rpx;
		margin-bottom: 16rpx;
		font-style: normal;
		text-transform: none;
	}
	.bacMentMCone{
		color: #3B5EEC !important;
	}
	.tabLIst.as{
		background-color: #F7F8FA;
		color: #0D0E0F;
		
	}
	.tabLIst.active{
		background-color: #3B5EEC;
		color: #FFFFFF;
	}
	
	.flex-top-header .search{
		height: 68rpx;
		background: #F7F8FA;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		box-sizing: border-box;
		padding: 20rpx 0rpx 20rpx 24rpx;
	}
	.flex-top-header .search-img{
		width: 28rpx;
		height: 28rpx;
		margin-right: 24rpx;
	}
	.flex-top-header .input{
		width: 100rpx;
		height: 37rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.saoxuan{
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		position: relative;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding-top: 34rpx;
		padding-bottom: 24rpx;
	}
	.saoxuan-posiconter{
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		border-top: 1rpx solid #EDEAEA;
	}
	.conteArr{
		width: 16rpx;
		height: 16rpx;
		transform: translate(-180deg);
		transform: rotate(-180deg);
	}
	.position{
		margin-top: 24rpx;
	}
	.position-list{
		padding: 24rpx;
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 16rpx;
	}
	.list-header .l{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 33rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.list-header .r{
		font-family: MiSans, MiSans;
		font-weight: 600;
		min-width: 70rpx;
		font-size: 28rpx;
		color: #ff0000;
		text-align: right;
		font-style: normal;
		text-transform: none;
	}
	.position-list .stne{
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 26rpx;
		color: #0D0E0F;
		text-align: left;
		margin-bottom: 16rpx;
		margin-top: 10rpx;
		font-style: normal;
		text-transform: none;
	}
	.position-list .cten{
		width: 144rpx;
		height: 56rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 56rpx;
		font-style: normal;
		text-transform: none;
		background: #3B5EEC;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
	.label-list{
		height: 44rpx;
		padding: 0 16rpx;
		background: #F7F8FA;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
		margin: 24rpx 0;
		margin-right: 16rpx;
		text-align: center;
		line-height: 44rpx;
		font-style: normal;
		text-transform: none;
	}
	.contenArrsbx{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #646669;
		line-height: 56rpx;
		overflow: hidden;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.contenArrsbx .user-img{
	width: 48rpx;
	height: 48rpx;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	margin-right: 8rpx;
}
.consList{
			height: 32rpx;
			background: #FAF2E7;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			min-width: 60rpx;
			
			color: #E8A03D;
			text-align: center;
			line-height: 32rpx;
			font-style: normal;
			text-transform: none;
			margin-left: 10rpx;
		}
	.tijiaoC{
		padding: 24rpx 0;
		box-sizing: border-box;
		border-bottom: 1rpx solid rgb(237, 234, 234);
	}
	.tijiaoC .congzhi{
		width: 180rpx;
		height: 80rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #3B5EEC;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #3B5EEC;
		text-align: center;
		line-height: 80rpx;
		font-style: normal;
		text-transform: none;
	}
	.tijiaoC .shaixuan{
		width: 498rpx;
		height: 80rpx;
		background: #3B5EEC;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.a{
		border: 2rpx solid chocolate;
		color:chocolate ;
	}
	.b{
		border: 2rpx solid steelblue; 
		color: steelblue;
	}
	.c{
		border: 2rpx solid forestgreen;
		color:forestgreen;
	}
	.d{
		border: 2rpx solid chocolate; 
		color: chocolate;
	}
</style>